<template>
  <div id="main"></div>
</template>

<script>
// import echarts from "echarts";
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
// import { getJson } from "../../../api/public.js";
import echarsData from "../../../public/json/echarsData.json";
export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    let nenghaoduibi = echarsData.nenghaoduibi;
    this.createLine();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    createLine() {
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "工业总能耗占比",
          //subtext: "深圳节能在线",
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            color: "#fff",
            fontSize: 16,
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          left: "center",
          align: "right",
        },
        color: [
          "#5ad8a6",
          "#f6bd16",
          //"#e8684a",
          "#5470c6",
          "#87ba76",
          "#fac858",
          //"#ea7c71",
          "#f1ab60",
          "#1ab8c2",
          "#418dd3",
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            axis: "x",
            snap: true,
            crossStyle: {
              color: "#999",
            },
          },
          formatter: function (params) {
            //console.log(params.value[params.encode.y[0]])
            console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
            let firstParams = params[0];
            let sndParams = params[1];
            let thirdParams = params[2];
            return (
              firstParams.name +
              "<br/> " +
              firstParams.seriesName +
              "：" +
              firstParams.data +
              " 吨标煤<br>" +
              thirdParams.seriesName +
              "：" +
              thirdParams.data +
              " 吨标煤<br>" +
              sndParams.seriesName +
              "：" +
              sndParams.data +
              " %"
            );
          },
        },

        legend: {
          data: ["工业总能耗", "全市总能耗", "工业总能耗占比"],
          textStyle: {
            fontSize: 14, //字体大小
            color: "#fff", //字体颜色
          },
          orient: "vertical",
          left: "center",
          bottom: "bottom",
        },

        grid: {
          left: "0%",
          right: "2%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["2016年", "2017年", "2018年", "2019年", "2020年"],
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],

        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
                width: 1, //这里是为了突出显示加上的
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#fff"],
                opacity: 0.1,
              },
            },
          },
        ],
        series: [
          {
            name: "工业总能耗",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [500, 490, 520, 547, 654],
          },
          {
            name: "工业总能耗占比",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [42, 78, 66, 490, 520],
          },
          {
            name: "全市总能耗",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [600, 800, 700, 78, 66],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    initChart() {
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          show: false,
        },
        // toolbox: {
        //   show : true,
        //   feature : {
        //     mark : {show: true},
        //     dataView : {show: true, readOnly: false},
        //     magicType : {
        //         show: true,
        //         type: ['pie', 'funnel']
        //     },
        //     restore : {show: true},
        //     saveAsImage : {show: true}
        //   }
        // },
        calculable: true,
        color: ["#f6c359", "#5ca2ee", "#9c43af", "#8ac48b"],
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [30, 150],
            center: ["50%", "70%"],
            roseType: "area",
            data: [
              {
                value: 40,
                name: "股票期权",
              },
              {
                value: 15,
                name: "限制性股票",
              },
              {
                value: 25,
                name: "限制性股票单位",
              },
              {
                value: 25,
                name: "股票增值权",
              },
            ],
          },
        ],
      });
    },
  },
};
</script>
<style>
/* #main {
  height: 100%;
} */
</style>
